<template>
	<view class="container">
		<!-- 头部信息 -->
		<view class="header" v-if="stationInfo">
			<view class="title flex">
				<text class="name">{{ stationInfo.name }}</text>
				<u-icon @click="collection" v-if="stationInfo.favorite == 0" name="star" size="28" color="#333"></u-icon>
				<u-icon @click="collection" v-if="stationInfo.favorite == 1" name="star-fill" size="28" color="#ffb300"></u-icon>
			</view>
			<view class="tags flex">
				<text class="tag" v-if="stationInfo.labels" v-for="(tag, index) in stationInfo.labels">{{ tag }}</text>
			</view>
			<view class="info flex">
				<view class="charging flex">
					<view class="label flex super" style="justify-content: center;" v-if="stationInfo.superFastCharging">
						<view class="status"><text class="text">超</text></view>
						<view class="value flex">
							<text class="text1">闲 {{stationInfo.superFastCharging.available || 0}}</text>
							<text class="text2">/{{stationInfo.superFastCharging.total || 0}}</text>
						</view>
					</view>
					
					<view class="label flex fast" style="justify-content: center;" v-if="stationInfo.fastCharging">
						<view class="status"><text class="text">快</text></view>
						<view class="value flex">
							<text class="text1">闲 {{stationInfo.fastCharging.available || 0}}</text>
							<text class="text2">/{{stationInfo.fastCharging.total || 0}}</text>
						</view>
					</view>
					
					<view class="label flex slow" style="justify-content: center;" v-if="stationInfo.slowCharging">
						<view class="status"><text class="text">慢</text></view>
						<view class="value flex">
							<text class="text1">闲 {{stationInfo.slowCharging.available || 0}}</text>
							<text class="text2">/{{stationInfo.slowCharging.total || 0}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="business flex">
				<text class="label">营业时间：</text>
				<text class="value">{{ stationInfo.operatingHours || '-' }}</text>
			</view>
			<view class="power flex">
				<text class="label">最大功率：</text>
				<text class="value">{{ stationInfo.maxPower || 0 }}kw</text>
			</view>
			<view class="address flex">
				<text class="label">{{ stationInfo.address }}</text>
				<view class="distance flex">
					<image class="icon" src="@/static/home/distance.png" mode="aspectFill"></image>
					<text>{{stationInfo.distance ? (stationInfo.distance).toFixed(2) : 0}}km</text>
				</view>
			</view>
			<view class="station-tags flex">
				<view class="tag station">
					<text>{{ stationTypeText[stationInfo.stationType] || '普通' }}</text>
				</view>
				<view class="tag invoice flex" style="justify-content: center;">
					<text class="text">{{ stationInfo.canInvoice == 1 ? '可开' : '不开' }}发票</text>
				</view>
			</view>
		</view>
		
		<!-- 价格信息 -->
		<view class="price-info">
			<view class="title flex">
				<text>价格信息</text>
				<view class="more flex" @click="showPricePopup">
					<text>全部时段</text>
					<u-icon name="arrow-right" size="22rpx" color="#777" :bold="true"></u-icon>
				</view>
			</view>
			<view class="price-list">
				<view v-for="(item, index) in displayPriceList">
					<price-card
						:key="index"
						:price="item"
						:displayTime="item.displayTime"
						:isCurrent="index === 0"
						displayStyle="row"
					></price-card>
				</view>
				<view class="empty flex" style="justify-content: center;width: 100%;">
					<u-empty iconSize="50" v-if="displayPriceList.length == 0"></u-empty>
				</view>
			</view>
		</view>
		
		<!-- 电站信息 -->
		<view class="station-info"> 
			<view class="title">电站</view>
			<view class="tabs flex" v-if="pileInfo">
				<view class="tab" :class="{active: pileStatus == 0}" @click="changePileStatus(0)">空闲 ({{ pileInfo.idleCount || 0 }})</view>
				<view class="tab" :class="{active: pileStatus == 1}" @click="changePileStatus(1)">已插枪 ({{ pileInfo.inUseCount || 0 }})</view>
				<view class="tab" :class="{active: pileStatus == 2}" @click="changePileStatus(2)">即将充满 ({{ pileInfo.nearingCompletionCount || 0 }})</view>
				<view class="tab" :class="{active: pileStatus == -1}" @click="changePileStatus(-1)">离线 ({{ pileInfo.offLineCount || 0 }})</view>
			</view> 
			<view class="charger-list" v-if="stationList.length > 0">
				<terminal-item 
					v-for="item in stationList" 
					:key="item.id"
					:info="item"
				></terminal-item>
			</view>
				
			<view class="empty-state" v-else>
				<u-empty mode="data" text="暂无数据"></u-empty>
			</view>
		</view>
		
		<!-- 停车费用说明 -->
		<view class="parking-info" v-if="stationInfo">
			<view class="title">停车费用</view>
			<view class="desc">{{ stationInfo.parkingFeeDesc || '暂无说明' }}</view>
		</view>
		
		<!-- 评价 -->
		<view class="comment">
			<view class="title flex">
				<text>评价</text>
				<view class="more flex" @click="showCommentPopup">
					<text>更多评论</text>
					<u-icon name="arrow-right" size="22rpx" color="#777" :bold="true"></u-icon>
				</view>
			</view>
			<view class="comment-list">
				<template v-if="commentList.length">
					<comment-item :comment="commentList[0]"></comment-item>
				</template>
				<template v-else>
					<view class="empty"><u-empty mode="data" text="暂无评论"></u-empty></view>
				</template>
			</view>
		</view>
		
		<!-- 评论弹窗 -->
		<u-popup :show="commentPopupVisible" mode="bottom" round="20" @close="closeCommentPopup">
			<view class="comment-popup">
				<view class="popup-header flex">
					<text>评价列表</text>
					<u-icon name="close" size="30rpx" color="#333" @click="closeCommentPopup"></u-icon>
				</view>
				<scroll-view 
					scroll-y 
					class="popup-content" 
					@scrolltolower="onLoadMore"
				>
					<template v-if="commentList.length">
						<view class="comment-list">
							<comment-item :comment="item" v-for="(item, index) in commentList" :key="index"></comment-item>
						</view>
						<view class="load">
							<u-loadmore 
								:status="commentLoadStatus" 
								loadingText="加载中..." 
								loadmoreText="上拉加载更多"
								nomoreText="暂无更多内容~" 
								color="#AAAAAA" 
								fontSize="24rpx" 
							/>
						</view>
					</template>
					<view v-else class="empty">
						<u-empty mode="data" text="暂无评论"></u-empty>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 价格详情弹窗 -->
		<price-popup
			:show="pricePopupVisible"
			:stationId="id"
			:priceList="allPriceList"
			@close="closePricePopup"
		></price-popup>
		
		<!-- 底部按钮 -->
		<view class="footer" @click="scanQrCode" v-if="!isFleetUser">
			<view class="btn">扫码充电</view>
		</view>
		
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		
		<com-map ref="commap" @myevent="setlocation"></com-map>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import priceMixin from '@/mixins/priceMixin'
	import ChargerItem from '@/components/charger/ChargerItem'
	import PriceCard from '@/components/price/PriceCard'
	import PricePopup from '@/components/price/PricePopup'
	import { getIsFleetUser } from '@/common/cacheManager.js';
	
	export default {
		components: {
			ChargerItem,
			PriceCard,
			PricePopup
		},
		
		mixins: [priceMixin],
		
		data() {
			return {
				source: '',
				percent: 0,
				interval: null,
				commentPopupVisible: false,
				pricePopupVisible: false,
				id: 0,
				stationInfo: null,
				currentPrice: 0, // 当前时段的价格
				stationPriceList: [], // 价格列表
				stationList: [], // 电站列表
				speedText: ['慢', '快', '超'],
				speedClass: ['slow', 'fast', 'super'],
				
				commentList: [], // 评论列表
				commentPage: {
					page: 1,
					size: 10,
					total: 0
				},
				commentLoadStatus: 'loadmore', // loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				displayPriceList: [], // 用于显示的价格列表（当前和下一个时段）
				allPriceList: [], // 用于显示全部时段的价格列表
				pileInfo: null,
				pileStatus: 0,
				scrollTop: 0,
				stationTypeText: {
					0: '普通',
					1: '快速',
					2: '超充',
					3: '综合站'
				},
				isFleetUser: false,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.source = option.source || '';
			this.getChargingDetail();
			this.fetchIsFleetUserStatus();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			// 新增一个方法来获取并设置 isFleetUser 状态
			async fetchIsFleetUserStatus() {
			    try {
			        const status = await getIsFleetUser(); // 调用缓存管理器中的函数
			        this.isFleetUser = status; // 将结果存入 data
			    } catch (error) {
			         // 处理错误，例如网络问题或 API 错误
			         console.error('获取 isFleetUser 状态失败:', error);
			         // 可以选择性地设置一个默认值，或者显示错误提示
			         // 为了安全起见，如果获取失败，可以默认隐藏（即设为 true），或者显示（设为 false）
			         // 这里我们假设获取失败时默认显示冻结金额（更保守）
			         this.isFleetUser = false;
			         // 或者显示用户友好的提示
			         // uni.showToast({ title: '获取用户状态失败', icon: 'none' });
			    }
			},
			//子组件传值
			setlocation(e){
				this.latitude = e.latitude
				this.longitude = e.longitude
				this.getChargingDetail()
			},
			
			// 切换充电站状态
			changePileStatus(type) {
				this.pileStatus = type;
				this.getStationList()
			},
			
			// 获取充电站详情
			getChargingDetail() {
				if (!this.mylocationState) {
					this.$refs.commap.setlocation()
					return
				}
				if (this.source === "test"){
					this.$http_api.testChargingList({
						id: this.id,
						userLatitude: this.mylocation.latitude,
						userLongitude: this.mylocation.longitude
					}).then((res) => {
						if (!res) return
						// 在这里增加额外的检查
						if (!res || !res.records || res.records.length === 0) {
						    // 如果 res 或 records 数组不存在/为空，则处理无数据的情况
						    console.error('未找到充电站详情或返回数据为空');
						    this.stationInfo = null; // 或者设置为一个空对象，以避免后续渲染出错
						    return;
						}
						this.stationInfo = this.handleDetail(res.records[0]);
						this.getStationPrice();
					})
				} else {
					this.$http_api.chargingDetail({
						id: this.id,
						userLatitude: this.mylocation.latitude,
						userLongitude: this.mylocation.longitude
					}).then((res) => {
						if (!res) return
						// 在这里增加额外的检查
						if (!res || !res.records || res.records.length === 0) {
						    // 如果 res 或 records 数组不存在/为空，则处理无数据的情况
						    console.error('未找到充电站详情或返回数据为空');
						    this.stationInfo = null; // 或者设置为一个空对象，以避免后续渲染出错
						    return;
						}
						this.stationInfo = this.handleDetail(res.records[0]);
						this.getStationPrice();
					})
				}
			},
			
			// 处理标签
			handleDetail(item) {
				let labels = [];
				// 配套服务
				if (item.serviceTypes && Array.isArray(item.serviceTypes)) {
					labels.push(...this.getFilterLabels('serviceType', item.serviceTypes))
				}
				// 科技特色
				if (item.technologyFeatures && Array.isArray(item.technologyFeatures)) {
					labels.push(...this.getFilterLabels('technologyFeatures', item.technologyFeatures))
				}
				// 停车场、停车费、充电方式标签为单个
				labels = this.getFilterOtherLabels(item.parkingArea, item.parkingFee, item.chargingType, labels)
				item.labels = labels
				return item;
			},
			
			// 单选筛选条件
			getFilterOtherLabels(parkingArea, parkingFee, chargingType, labels) {
				// 停车场
				const parkingAreaLabel = this.$store.state.parkingType.find((item, index) => parkingArea == item.value)
				if (parkingAreaLabel) {
					labels.push(parkingAreaLabel.name)
				}
				// 停车费
				const parkingFeeLabel = this.$store.state.parkingFee.find((item, index) => parkingFee == item.value)
				if (parkingFeeLabel) {
					labels.push(parkingFeeLabel.name)
				}
				// 充电方式
				const chargingTypeLabel = this.$store.state.chargingType.find((item, index) => chargingType == item.value)
				if (chargingTypeLabel) {
					labels.push(chargingTypeLabel.name)
				}
				return labels;
			},
			
			// 获取充电站使用状态的统计
			getChargingStatusCount() {
				this.$http_api.chargingStatusCount({ stationId: this.id }).then(res => {
					this.pileInfo = res;
				})
			},
			
			// 获取价格时间段
			getStationPrice() {
				this.$http_api.stationPrice({ id: this.id }).then((res) => {
					if (!res) {
						return;
					}
					this.getChargingStatusCount();
					this.getStationList();
					this.getCommentList();
					
					this.stationPriceList = res.timeSegments;
					
					// 处理全部时段的显示
					this.allPriceList = this.stationPriceList.map(segment => ({
						...segment,
						displayTime: this.formatTimeRange(segment.startTime, segment.endTime)
					}));
					
					// 处理当前和下一个时段的显示
					this.displayPriceList = [];
					
					const currentSegment = this.getCurrentTimeSegment();
					if(currentSegment) {
						this.displayPriceList.push({
							...currentSegment,
							displayTime: '当前时段'
						});
					}
					
					const nextSegment = this.getNextTimeSegment();
					if(nextSegment) {
						this.displayPriceList.push({
							...nextSegment,
							displayTime: `${this.formatTime(...nextSegment.startTime)}开始`
						});
					}
				})
			}, 
			
			getStationList() {
				this.$http_api.chargingStationList({
					stationId: this.id,
					pageNo: 1,
					pageSize: 200,
					pileStatus: this.pileStatus
				}).then((res) => {
					this.stationList = res.records;
				})
			},
			
			getCommentList(isLoadMore = false) {
				if(!isLoadMore) {
					this.commentPage.page = 1;
					this.commentList = [];
				}
				
				this.commentLoadStatus = 'loading';
				this.$http_api.stationCommentList({
					stationId: this.id,
					page: this.commentPage.page,
					size: this.commentPage.size
				}).then((res) => {
					if(isLoadMore) {
						this.commentList = [...this.commentList, ...res.records];
					} else {
						this.commentList = res.records;
					}
					this.commentPage.total = res.total;
					
					// 判断是否还有更多数据
					if(this.commentList.length >= res.total) {
						this.commentLoadStatus = 'nomore';
					} else {
						this.commentLoadStatus = 'loadmore';
					}
				}).catch(() => {
					this.commentLoadStatus = 'loadmore';
				})
			},
			showCommentPopup() {
				this.commentPopupVisible = true
			},
			closeCommentPopup() {
				this.commentPopupVisible = false
			},
			showPricePopup() {
				this.pricePopupVisible = true
			},
			closePricePopup() {
				this.pricePopupVisible = false
			},
			toScanStep() {
				
				uni.navigateTo({
					url: '/pages/scan/step1?id=' + this.id
				})
			}, 
			onLoadMore() {
				if(this.commentLoadStatus === 'nomore') return;
				
				this.commentPage.page++;
				this.getCommentList(true);
			},
			// 收藏、取消收藏
			collection() {
				if (this.stationInfo.favorite == 0) {
					this.$http_api.addStationFavorite({ stationId: this.stationInfo.id }).then(res => {
						this.stationInfo.favorite = 1;
						uni.$u.toast('收藏成功')
					});
				} else {
					this.$http_api.cancelStationFavorite({ stationId: this.stationInfo.id }).then(res => {
						this.stationInfo.favorite = 0
						uni.$u.toast('取消收藏成功')
					});
				}
			},
			// 格式化时间
			formatTime(hour, minute) {
				return `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
			},

			// 格式化时间段显示
			formatTimeRange(startTime, endTime) {
				return `${this.formatTime(...startTime)}-${this.formatTime(...endTime)}`;
			},

			// 处理价格数据
			processPriceData(priceData) {
				const { startTime, endTime, ...rest } = priceData;
				return {
					...rest,
					displayTime: this.formatTimeRange(startTime, endTime),
					timeRange: {
						start: startTime[0] * 60 + startTime[1],
						end: endTime[0] * 60 + endTime[1]
					}
				};
			},

			// 获取当前时间分钟数
			getCurrentMinutes() {
				const now = new Date();
				return now.getHours() * 60 + now.getMinutes();
			},

			// 获取当前时间段
			getCurrentTimeSegment() {
				if(!this.stationPriceList.length) return null;
				const currentMinutes = this.getCurrentMinutes();
				
				return this.stationPriceList.find(segment => {
					const processedData = this.processPriceData(segment);
					return currentMinutes >= processedData.timeRange.start && 
						   currentMinutes <= processedData.timeRange.end;
				});
			},

			// 获取下一个时间段
			getNextTimeSegment() {
				if(!this.stationPriceList.length) return null;
				const currentMinutes = this.getCurrentMinutes();
				
				return this.stationPriceList.find(segment => {
					const processedData = this.processPriceData(segment);
					return processedData.timeRange.start > currentMinutes;
				});
			},
			
			getFilterLabels(type, indices) {
				if (!Array.isArray(indices) || !this.$store.state[type]) {
					return [];
				}
				const labels = indices.map(index => {
					const item = this.$store.state[type].find(label => label.value == index)
					if (item) {
						return item.name.replaceAll('\r\n', '')
					}
					return ''
				})
				return labels
			},
		},
		computed: {
			...mapState(['mylocation', 'mylocationState']),
			// 获取当前时间段的索引
			currentTimeSegmentIndex() {
				if(!this.allPriceList.length) return -1;
				const currentMinutes = this.getCurrentMinutes();
				
				return this.allPriceList.findIndex(segment => {
					const processedData = this.processPriceData(segment);
					return currentMinutes >= processedData.timeRange.start && 
						   currentMinutes <= processedData.timeRange.end;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('~@/static/css/station.css');
	
	.container {
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}
	
	.header {
		background: #fff;
		padding: 30rpx;
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 28rpx;
		
		.title {
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
			}
			
			.collect {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.tags {
			align-items: center;
			flex-wrap: wrap;
			
			.tag {
				font-size: 22rpx;
				color: #777;
				font-family: "PINGFANG";
				margin-right: 10rpx;
				margin-bottom: 15rpx;
				
				&:not(:last-child)::after {
					content: '';
					display: inline-block;
					width: 1rpx;
					height: 15rpx;
					background: #aaa;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
		}
		
		.info {
			margin-bottom: 20rpx;
		}
		
		.business, .power {
			margin-bottom: 15rpx;
			
			.label, .value {
				font-size: 24rpx;
				color: #333;
				font-weight: 400;
				font-family: "PINGFANG";
			}
		}
		
		.address {
			justify-content: space-between;
			
			.label {
				flex: 1;
				padding-right: 40rpx;
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
				max-width: calc(100vw - 300rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.distance {
				align-self: flex-start;
				
				.icon {
					width: 16rpx;
					height: 16rpx;
					margin-right: 5rpx;
				}
				
				text {
					font-size: 22rpx;
					color: #777;
					font-family: "PINGFANG";
				}
			}
		}
		
		.station-tags {
			display: inline-flex;
			align-items: center;
			background: #1C6EFB;
			border-radius: 5rpx;
			height: 32rpx;
			padding: 0 0 0 4rpx;
			
			.tag {
				display: inline-flex;
				align-items: center;
				
				&.station {
					text {
						display: inline-block;
						font-size: 20rpx;
						font-family: "PINGFANG";
						border-radius: 7rpx;
						padding: 2rpx 5rpx;
						line-height: 20rpx;
						color: #fff;
					}
				}
				
				&.invoice {
					text {
						font-size: 20rpx;
						font-weight: 400;
						font-family: "PINGFANG";
						color: #AAA;
						background: #F6FAFF;
						border-radius: 5rpx;
						margin: 2rpx;
						height: 28rpx;
						line-height: 28rpx;
						padding: 0 10rpx;
					}
				}
			}
		}
	}
	
	.price-info {
		margin: 20rpx 20rpx 0 20rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 28rpx;
		
		.title {
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
			}
			
			.more {
				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999;
					margin-right: 10rpx;
				}
			}
		}
		
		.price-list {
			display: flex;
		}
	}
	
	.station-info {
		margin: 20rpx 20rpx 0 20rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 28rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			font-family: "PINGFANG";
			margin-bottom: 30rpx;
		}
		
		.tabs {
			margin-bottom: 30rpx;
			// justify-content: space-between;
			
			.tab {
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
				background: #F6F6F6;
				padding: 15rpx 30rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				
				&.active {
					color: #1C6EFB;
					background: #E5EFFF;
				}
			}
		}
		
		.charger-list {
			.charger-item {
				position: relative;
				
				&:not(:last-child) {
					border-bottom: 1rpx solid #EEEEEE;
					margin-bottom: 20rpx;
					padding: 20rpx 0;
				}
				
				&:last-child {
					padding-top: 20rpx;
				}
				
				.status {
					width: 120rpx;
					flex-direction: column;
					align-items: center;
					margin-right: 30rpx;
					align-self: flex-start;
					
					.circle-progress {
						position: relative;
					}
				}
				
				.info {
					overflow: hidden;
					
					.name {
						font-size: 24rpx;
						color: #333;
						font-family: "PINGFANG";
						margin-bottom: 5rpx;
						font-weight: 400;
					}
					
					.sn, .power, .voltage, .standard {
						font-size: 22rpx;
						color: #777;
						font-family: "PINGFANG";
						margin-bottom: 5rpx;
					}
				}
				
				.super, .fast, .slow {
					position: absolute;
					right: 0;
					top: 20rpx;
					font-family: "PINGFANG";
					font-size: 20rpx;
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					border-radius: 4rpx;
					justify-content: center;
				}
				
				.super {
					background: linear-gradient(to bottom, #947DFE, #6C4EFB);
				}
				
				.fast {
					background: linear-gradient(to bottom, #FF8924, #FF6800);
				}
				
				.slow {
					background: linear-gradient(to bottom, #42E0A2, #2CD291);
				}
			}
		}
	}
	
	.parking-info {
		margin: 20rpx 20rpx 0 20rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 28rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			font-family: "PINGFANG";
			margin-bottom: 20rpx;
		}
		
		.desc {
			font-size: 24rpx;
			color: #333;
			font-family: "PINGFANG";
			font-weight: 400;
		}
	}
	
	.comment {
		margin: 20rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 28rpx;
		
		.title {
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
			}
			
			.more {
				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #999;
					margin-right: 10rpx;
				}
				
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		
		.comment-list {
			.comment-item {
				margin-bottom: 20rpx;
				&:not(:last-child) {
					border-bottom: 1rpx solid #eee;
					padding-bottom: 20rpx;
				}
				
				.avatar {
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					align-self: flex-start;
				}
				
				.info {
					flex: 2;
				}
				
				.user {
					align-items: center;
					margin-bottom: 10rpx;
					justify-content: space-between;
					
					.name {
						font-size: 28rpx;
						color: #333;
						font-family: "PINGFANG";
					}
					
					.score {
						font-size: 36rpx;
						color: #FC0A01;
						font-weight: 400;
						font-family: "PINGFANG";
					}
				}
				
				.content {
					font-size: 24rpx;
					color: #333;
					font-family: "PINGFANG";
					margin-bottom: 20rpx;
				}
				
				.images {
					flex-wrap: wrap;
					// gap: 20rpx;
					margin-bottom: 20rpx;
					
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						
						&:nth-child(3n + 2) {
							margin-left: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
				
				.time {
					font-size: 22rpx;
					color: #AAA;
					font-weight: 400;
					font-family: "PINGFANG";
				}
			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		
		.btn {
			height: 88rpx;
			background: #42E0A2;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #fff;
			font-family: "PINGFANG";
		}
	}
	
	.lightning {
		width: 16rpx;
		height: 22rpx;
	}
	
	.comment-popup {
		background: #fff;
		border-radius: 28rpx 28rpx 0 0;
		
		.popup-header {
			padding: 30rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			
			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
				flex: 2;
				text-align: center;
			}
		}
		
		.popup-content {
			height: 70vh;
			padding: 0 30rpx;
			width: calc(100% - 60rpx);
			
			.comment-list {
				padding: 20rpx 0;
				
				.comment-item {
					margin-bottom: 20rpx;
					&:not(:last-child) {
						border-bottom: 1rpx solid #eee;
						padding-bottom: 20rpx;
					}
					
					.avatar {
						width: 82rpx;
						height: 82rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						align-self: flex-start;
					}
					
					.info {
						flex: 2;
					}
					
					.user {
						align-items: center;
						margin-bottom: 10rpx;
						justify-content: space-between;
						
						.name {
							font-size: 28rpx;
							color: #333;
							font-family: "PINGFANG";
						}
						
						.score {
							font-size: 36rpx;
							color: #FC0A01;
							font-weight: 400;
							font-family: "PINGFANG";
						}
					}
					
					.content {
						font-size: 24rpx;
						color: #333;
						font-family: "PINGFANG";
						margin-bottom: 20rpx;
					}
					
					.images {
						flex-wrap: wrap;
						// gap: 20rpx;
						margin-bottom: 20rpx;
						
						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							margin-bottom: 20rpx;
							
							&:nth-child(3n + 2) {
								margin-left: 20rpx;
								margin-right: 20rpx;
							}
						}
					}
					
					.time {
						font-size: 22rpx;
						color: #AAA;
						font-weight: 400;
						font-family: "PINGFANG";
					}
				}
			}
			
			.load {
				padding-bottom: 30rpx;
			}
		}
	}
	
	.price-popup {
		background: #fff;
		height: auto;
		max-height: 80vh;
		border-radius: 28rpx 28rpx 0 0;
		display: flex;
		flex-direction: column;
		
		.popup-header {
			padding: 30rpx;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;
			
			text {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				font-family: "PINGFANG";
				flex: 2;
				text-align: center;
			}
		}
		
		.popup-content {
			padding: 0;
			flex: 1;
			height: 0;
			width: calc(100% - 60rpx);
			margin: 0 30rpx;
			
			.price-formula {
				justify-content: space-between;
				padding: 20rpx 0;
				
				.label {
					position: relative;
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
					font-family: "PINGFANG";
					text-align: center;
					
					&:nth-child(1) { flex: 1.5; }
					&:nth-child(2) { flex: 1; }
					&:nth-child(3) { flex: 0.3; }
					&:nth-child(4) { flex: 1; }
					&:nth-child(5) { flex: 0.3; }
					&:nth-child(6) { flex: 1; }
					
					&::after {
						content: '';
						position: absolute;
						bottom: -30rpx;
						left: 50%;
						transform: translateX(-50%);
						font-size: 20rpx;
						color: #999;
						white-space: nowrap;
					}
					&:nth-child(2)::after {
						content: '(元/度)';
					}
					&:nth-child(4)::after {
						content: '(元/度)';
					}
					&:nth-child(6)::after {
						content: '(元/度)';
					}
					
					&:nth-child(3),
					&:nth-child(5) {
						flex: 0.5;
						
						&::after {
							content: none;
						}
					}
				}
			}
			
			.price-list {
				margin-top: 40rpx;
				
				.price-item {
					justify-content: space-between;
					padding: 20rpx 0;
					border: 1rpx solid #EEEEEE;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					
					text {
						font-size: 24rpx;
						color: #333;
						font-family: "PINGFANG";
						text-align: center;
						font-weight: 400;
						
						&.time { flex: 1.5; }
						&.total { flex: 1; }
						&.equal { flex: 0.3; }
						&.power { flex: 1; }
						&.plus { flex: 0.3; }
						&.service { flex: 1; }
					}
					
					.equal, .plus {
						flex: 0.5;
						color: #999;
					}
					
					&.current {
						background: #E5EFFF;
						border-color: #1C6EFB;
						
						.total {
							color: #FC0A01;
							font-weight: 600;
						}
					}
				}
			}
			
			.tips {
				font-size: 24rpx;
				color: #999;
				font-family: "PINGFANG";
				line-height: 1.5;
				margin: 30rpx 0;
			}
		}
	}
</style>